<template>
  <div>
    <h1>this is father</h1>
    <!-- 父传子 第一步：在引入的子组件标签中 使用v-bind(:)绑定一个自定义属性 -->
    <!-- 
    子传父第二步：通过v-on(@)绑定自定义事件（事件名和this.$emit中的对应起来）等号右边的方法会默认接收一个参数
    这个参数就是子组件传过来的值
     -->
    <!-- 访问子组件中的方法：通过ref的方式，1.给子组件标签用ref起个名 -->
    <bestSon :father-gift="gift" :father-money="money" @sonGift="handle" @hug="chuli" ref="sun"></bestSon>
    <h1>儿子给的----{{ sonMsg }}---{{ newMsg }}</h1>
    <button @click="fu">用子组件的change方法</button>
  </div>
</template>

<script>
//1.
import bestSon from './son.vue'
export default {
  components: {
    bestSon
  },
  data() {
    return {
      gift: '七匹狼',
      money: 1,
      msg: 'father money bao',
      sonMsg: '',
      newMsg: ''
    }
  },
  methods: {
    // val就是子组件传来的值
    handle(val) {
      console.log(val, '子组件的数据');
      this.sonMsg = val
    },
    chuli(val) {
      this.newMsg = val
    },
    fu() {
      console.log(this.$refs.sun) //里面有子组件的数据及方法
      // 通过this.$ref.son.方法名()调用
      this.$refs.sun.change()
    }
  }

}
</script>

<style lang="scss" scoped></style>